const tbody = document.querySelector('tbody');

function score() {
    axios
        .get('/score/list')
        .then(result => {
            const obj = result.data.data
            // console.log(obj);
            let html = ''
            for (const key in obj) {

                const tempHTML = obj[key].score.reduce((v, h, i) =>

                    v + `
           <td class="score">${h}<input type="text" data-batch="${i + 1}"  data-id="${key}" ></td>
           `, ''

                )
                // console.log(tempHTML);
                html += `
           <tr>
           <th scope="row">${key}</th>
           <td>${obj[key].name}</td>
          ${tempHTML}
           </tr>
           `
            }

            tbody.innerHTML = html
            const inputs = document.querySelectorAll('tbody input');
            inputs.forEach(v => {
                v.addEventListener('blur', function (e) {
                    const data = {
                        stu_id: e.target.dataset.id,
                        batch: e.target.dataset.batch,
                        score: v.value,
                    }
                    axios
                        .post('/score/entry', data)
                        .then(result => {
                            // console.log(result);
                            if (result.data.code === 0) {
                                toastr.success(result.data.message)

                                score()
                            }
                        })

                })
            })
        })

}

// 渲染页面
score()

// 双击事件
tbody.addEventListener('dblclick', function (e) {
    const dom = e.target
    if (dom.nodeName === 'TD' && dom.classList.contains('score')) {
        const input = dom.querySelector('input');
        // console.log(input);
        input.style.display = 'block'
        input.value = dom.innerText;
        input.focus()
    }

})


